<template>
    <div v-loading="loading">
        <!-- 修改用户信息 -->
        <el-dialog title="修改用户信息" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="120px" ref="form">
                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="头像">
                    <medium v-model="form.avatar"></medium>
                </el-form-item>

                <el-form-item label="背景">
                    <medium v-model="form.background"></medium>
                </el-form-item>

                <el-form-item label="个人简介">
                    <el-input placeholder="请输入个人简介" style="width: 500px" v-model="form.subtitle"></el-input>
                </el-form-item>

                <el-form-item label="电话 ">
                    <el-input placeholder="请输入电话 " style="width: 500px" v-model="form.mobile"></el-input>
                </el-form-item>

                <el-form-item label="资金密码">
                    <el-input placeholder="请输入资金密码" style="width: 500px" v-model="form.fun_password"
                        show-password></el-input>
                </el-form-item>

                <el-form-item label="用户余额">
                    <el-input placeholder="请输入用户余额" style="width: 500px" :disabled="true" v-model="form.balance"></el-input>
                </el-form-item>

                <el-form-item label="增减余额">
                    <el-input placeholder="填写正数或负数，例：+100 或 -100" style="width: 500px"
                        v-model="form.balance_change"></el-input>
                </el-form-item>

                <el-form-item label="登录密码">
                    <el-input placeholder="请输入登录密码" style="width: 500px" v-model="form.password" show-password></el-input>
                </el-form-item>

                <el-form-item label="实名认证">
                    <el-tag :type="form.authentication == 1 ? 'success' : 'danger'">{{ form.authentication == 1 ? '已实名' :
                        '未实名' }}</el-tag>
                    <el-popconfirm @confirm="resetting(form.id)" title="确定要重置实名认证吗？">
                        <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 3px;"
                            type="danger">重置实名认证</el-button>
                    </el-popconfirm>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改金额 -->
        <el-dialog title="修改用户金额" :visible.sync="updateMoney" width="800px">
            <el-form :model="form" label-width="120px" ref="form">
                <el-form-item label="用户余额">
                    <el-input placeholder="请输入用户余额" style="width: 500px" :disabled="true" v-model="userBalance"></el-input>
                </el-form-item>
                <el-form-item label="增减余额">
                    <el-input placeholder="填写正数或负数，例：+100 或 -100" style="width: 500px"
                        v-model="updateMoneyForm.balance_change"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="updateMoney = false">取 消</el-button>
                <el-button @click="updateMoneySubmit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-card body-style="padding:10px" class="box-card">
            <el-input class="marginBottom" clearable placeholder="请输入昵称" size="small" style="width: 200px;" v-model="query.name"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入ID" size="small" style="width: 200px;" v-model="query.id"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入登录IP" size="small" style="width: 200px;" v-model="query.ip"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入真实姓名" size="small" style="width: 200px;"
                v-model="query.cert_name"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入身份证" size="small" style="width: 200px;" v-model="query.cert_no"></el-input>
            <el-input class="marginBottom" clearable placeholder="请输入手机号" size="small" style="width: 200px;" v-model="query.mobile"></el-input>
            <el-select class="marginBottom" placeholder="选择状态" v-model="query.disable">
                <el-option :key="item.value" :label="item.name" :value="item.label" v-for="item in typeList"></el-option>
            </el-select>
            <el-select  class="marginBottom" placeholder="是否实名认证" v-model="query.authentication">
                <el-option :key="item.value" :label="item.name" :value="item.label"
                    v-for="item in authenticationList"></el-option>
            </el-select>
            <el-select   placeholder="是否在线" v-model="query.online">
                <el-option :key="item.value" :label="item.name" :value="item.label" v-for="item in onlineList"></el-option>
            </el-select>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="昵称" prop="name"></el-table-column>
                <el-table-column label="头像" prop="avatar">
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.avatar"
                            :preview-src-list="toArray(scope.row.avatar)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="性别" prop="gender">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.gender == 0 ? '未知' : scope.row.gender == 1 ? '男' : '女' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="真实姓名" prop="cert_name" >
                    <template slot-scope="scope">
                        <div v-if="scope.row.authentication" >
                            {{ scope.row.authentication && scope.row.cert_name == null ? "实名信息丢失" : scope.row.cert_name  }}
                            <span v-if="scope.row.cert_name" style="color: #409eff;cursor: pointer;" @click="realNameNumber(scope.row.cert_name)">{{  '实名数' + scope.row.cert_no_each_count  }}</span>
                        </div>
                        <div v-else>
                            未实名
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>

                <el-table-column label="区号" prop="country_code"></el-table-column>

                <el-table-column label="是否VIP" prop="is_vip">
                    <template slot-scope="scope">
                        <div>{{ scope.row.is_vip ? "是" : "否" }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="开启青少年模式" prop="teenager_anchor">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.teenager_anchor" active-color="#13ce66" inactive-color="#999"
                            @change="changeFun($event, scope.row.id)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="disable">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.disable == 0 ? 'success' : 'danger'">{{ scope.row.disable == 0 ? '正常' :
                            '禁用' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="在线状态" prop="online">
                    <template slot-scope="scope">
     
                        <div v-if="scope.row.online == 0"> 离线 </div>
                        <div v-else style="color: #69c33d"> 在线 </div>
                    </template>
                </el-table-column>

                <el-table-column label="封禁直播" prop="disable">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.disable_live == 0 ? 'success' : 'danger'">{{ scope.row.disable_live == 0 ?
                            '正常' :
                            '封禁' }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="170px">
                    <template slot-scope="scope">
                        <div style="display: flex;">
                            <UserInfo :user_id="scope.row.id" v-if="scope.row.id" :showBtn="true" :modalShow="false"
                                v-permission="['ADMIN', 'USER_MANAGE_DETAILS']">
                            </UserInfo>
                            <!-- <el-button @click="toForm(scope.row.id)" size="mini" style="padding: 10px;margin-left: 3px;"
                                type="primary">修改</el-button> -->
                            <!-- <el-popconfirm @confirm="disableFun(scope.row.id)" title="这是用户确定要禁用吗？"
                                v-if="scope.row.disable == 0">
                                <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 3px;"
                                    type="danger">禁用</el-button>
                            </el-popconfirm>
                            <el-button @click="disableFun(scope.row.id)" size="mini" style="padding: 10px;margin-left: 3px;"
                                type="success" v-else>启用</el-button> -->

                            <el-dropdown style="margin-left: 10px;">
                                <el-button type="primary">
                                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>

                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_UPDATE']">
                                        <el-button @click="toForm(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">修改</el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_DISABLE']"> <el-popconfirm
                                            @confirm="reasonShowFun(scope.row.id)" title="这是用户确定要禁用吗？"
                                            v-if="scope.row.disable == 0">
                                            <el-button size="mini" slot="reference" style="padding: 10px;margin-top: 10px;"
                                                type="danger">禁用</el-button>
                                        </el-popconfirm>
                                        <el-button @click="EnableFun(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="success"
                                            v-else>启用</el-button></el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_RELEASE']">
                                        <el-button @click="releaseVideo(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">发布视频</el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_CREATE']">
                                        <el-button @click="createCollection(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">创建合集</el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_DISABLE_LIVE']"> <el-popconfirm
                                            @confirm="disableLiveFormFun(scope.row.id)" title="确定要封禁这个用户的直播功能吗？"
                                            v-if="scope.row.disable_live == 0">
                                            <el-button size="mini" slot="reference" style="padding: 10px;margin-top: 10px;"
                                                type="danger">封禁直播</el-button>
                                        </el-popconfirm>
                                        <el-button @click="EnableFunLiveFun(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="success"
                                            v-else>启用直播</el-button></el-dropdown-item>
                                    <el-dropdown-item v-permission="['ADMIN', 'USER_MANAGE_ALBUM']">
                                        <el-button @click="toAlbum(scope.row)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">相册</el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_UPDATE_MONEY']">
                                        <el-button @click="updateMoneyFun(scope.row)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">修改金额</el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item v-permission="['ADMIN', 'USER_UPLOAD_POST']">
                                        <el-button @click="releasePost(scope.row.id)" size="mini"
                                            style="padding: 10px;margin-top: 10px;" type="primary">发布帖子</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>

        <!-- 禁用用户 -->
        <el-dialog :visible.sync="reasonShow" title="禁用原因" width="800px">
            <el-form :model="form">
                <el-form-item label="禁用原因">
                    <el-input placeholder="请输入禁用原因" style="width: 500px" v-model="reasonForm.disable_reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="disableFun" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 禁用用户直播 -->
        <el-dialog :visible.sync="disableLiveFormShow" title="禁用直播原因" width="800px">
            <el-form :model="form">
                <el-form-item label="禁用原因">
                    <el-input placeholder="请输入禁用原因" style="width: 500px" v-model="disableLiveForm.disable_live_reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="disableLiveFun" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
      
<script>
import initData from '@/mixins/index'
import medium from '@/components/medium/index'
export default {
    name:"user-manage-list",
    mixins: [initData],
    components: {
        medium
    },
    data() {
        return {
            query: {
                name: "",
                id: "",
                ip:'',
                cert_name: "",
                cert_no: "",
                disable: null,
                online:null,//0 离线，1在线
                authentication: null,//0未实名，1已实名
            },
            typeList: [
                {
                    label: '0',
                    name: '正常'
                },
                {
                    label: '1',
                    name: '禁用'
                }
            ],
            onlineList: [
                {
                    label: '0',
                    name: '离线'
                },
                {
                    label: '1',
                    name: '在线'
                }
            ],
            authenticationList: [
                {
                    label: '1',
                    name: '是'
                },
                {
                    label: '0',
                    name: '否'
                }
            ],
            value: '',
            visible: false,
            loading: false,
            updateMoney: false,
            userBalance: "",
            updateMoneyForm: {
                balance_change: "",
                id: ""
            },
            images: [],
            submitComplete: false,
            id: "",
            form: {
                name: '',
                avatar: '',
                background: '',
                subtitle: '',
                mobile: '',
                fun_password: '',
                balance: '',
                authentication: null,
                password: '',
                balance_change: ''
            },
            reasonShow: false,
            reasonForm: {
                disable_reason: "", //理由
                disable: null, //0是开启 1是禁用
            },
            disableID: '',
            disableLiveFormShow: false,
            disableLiveForm: {
                disable_live_reason: "", //理由
                disable_live: null, //0是开启 1是禁用
            },
            disableLiveId: ''
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = "/user/index"
            this.init() //重新请求数据
        },
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        realNameNumber(name){
            this.page = 1
            this.query.cert_name = name
            this.$nextTick(()=>{
                this.init()
            })
        },
        updateMoneyFun(item) {
            this.updateMoney = true
            this.updateMoneyForm.id = item.id
            this.userBalance = item.balance
            console.log(item)
        },
        resetting(id) {
            this.$request.put('/user/authentication_reset/' + id).then((res) => {
                this.$message.success('已重置')
                this.form.authentication = 0
            })
        },
        updateMoneySubmit() {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request.put('/user/balance_change', this.updateMoneyForm).then((res) => {
                this.$message.success('修改成功')
                this.submitComplete = false
                this.updateMoney = false
                this.updateMoneyForm = {
                    balance_change: "",
                    id: ""
                }
                this.init()
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        reasonShowFun(id) {
            this.disableID = id
            this.reasonShow = true
        },
        initReasonForm() {
            this.reasonForm = {
                disable_reason: "", //理由
                disable: null, //0是开启 1是禁用
            }
        },
        //禁用
        disableFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            that.reasonForm.disable = 1
            this.$request.put('/user/update_disable/' + that.disableID, that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        //启用
        EnableFun(id) {
            let that = this
            this.$request.put('/user/update_disable/' + id, { disable: 0 }).then((res) => {
                this.$message.success('操作成功')
                that.initReasonForm()
                this.init() //重新请求数据
            })
        },


        disableLiveFormFun(id) {
            this.disableLiveId = id
            this.disableLiveFormShow = true
        },

        //禁用直播
        disableLiveFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            that.disableLiveForm.disable_live = 1
            this.$request.put('/user/update_disable_live/' + that.disableLiveId, that.disableLiveForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.disableLiveFormShow = false
                that.disableLiveForm = {
                    disable_live_reason: "", //理由
                    disable_live: null, //0是开启 1是禁用
                }

                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },



        EnableFunLiveFun(id) {
            let that = this
            this.$request.put('/user/update_disable_live/' + id, { disable_live: 0 }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },

        toAlbum(row) {
            this.$router.push({ path: "/album-list/?user_id=" + row.id + '&nikename=' + row.name });
        },

        changeAuthentication(event) {
            this.form.authentication = event
            console.log(event)
        },

        closeBox() {
            this.visible = false
            this.form = {
                name: '',
                avatar: '',
                background: '',
                subtitle: '',
                mobile: '',
                fun_password: '',
                balance: '',
                authentication: null,
                password: '',
                balance_change: ''
            }
        },

        releaseVideo(id) {
            this.$router.push({ path: "/upload-video?user_id=" + id });
        },

        releasePost(id) {
            this.$router.push({ path: "/upload-post?user_id=" + id });
        },

        createCollection(id) {
            this.$router.push({ path: "/add-collection?user_id=" + id });
        },


        getUserInfo(id) {
            let that = this
            this.$request.get('/user/info/' + id).then((res) => {
                this.form.name = res.name
                this.form.avatar = res.avatar
                this.form.background = res.background
                this.form.subtitle = res.subtitle
                this.form.mobile = res.mobile
                this.form.fun_password = res.fun_password
                this.form.balance = res.balance
                this.form.authentication = res.authentication
                this.form.id = res.id
            })
        },

        toForm(id) {
            this.getUserInfo(id)
            this.visible = true
            this.id = id
        },

        changeFun(event, id) {
            console.log("ss", event, id)
            let that = this
            this.$request.put('/user/option_teenager_anchor/' + id).then((res) => {
                this.$message.success('操作成功')
            })
        },
        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            delete this.form.balance; //不传递余额给后端

            this.$request.put('/user/update/' + this.id, this.form).then((res) => {
                console.log(res)
                this.$message({
                    message: '修改成功',
                    type: 'success',
                })

                this.closeBox()
                this.submitComplete = false
            }).catch((error) => {
                this.submitComplete = false
            });
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}

.el-dropdown {
    vertical-align: top;
}

.el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>